<template>
  <el-dialog v-model="visible" title="发布新帖" width="600px" @close="handleClose">
    <el-form :model="postForm" ref="formRef" label-position="top">
      <el-form-item label="选择板块" prop="sectionId">
        <el-select v-model="postForm.sectionId" placeholder="请选择帖子所属板块" style="width: 100%;">
          <el-option v-for="section in sections" :key="section.id" :label="section.name" :value="section.id" />
        </el-select>
      </el-form-item>
      <el-form-item label="帖子标题" prop="title">
        <el-input v-model="postForm.title" placeholder="请输入帖子标题" />
      </el-form-item>
      <el-form-item label="帖子内容" prop="content">
        <el-input v-model="postForm.content" type="textarea" :rows="5" placeholder="分享您的护理经验、案例或提问..." />
      </el-form-item>
    </el-form>
    <div class="d-flex justify-content-between align-items-center">
      <div>
        <el-button size="small" class="me-2"><i class="bi bi-image me-1"></i> 图片</el-button>
        <el-button size="small" class="me-2"><i class="bi bi-file-earmark me-1"></i> 文件</el-button>
        <el-button size="small"><i class="bi bi-tag me-1"></i> 话题</el-button>
      </div>
      <el-button type="primary" @click="handlePublish" :loading="isSubmitting">发布</el-button>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, watch, onMounted } from 'vue';
import { useForumStore } from '@/stores/forum.js';
import { storeToRefs } from 'pinia'; // 2. 引入 storeToRefs
import { ElMessage } from 'element-plus';

const props = defineProps({
  modelValue: Boolean, // for v-model
});
const emit = defineEmits(['update:modelValue', 'post-created']);

const forumStore = useForumStore();
const { sections } = storeToRefs(forumStore);
const formRef = ref(null);
const isSubmitting = ref(false);

const postForm = reactive({
  title: '',
  content: '',
  sectionId: null, // 默认为null
});

const visible = ref(props.modelValue);
watch(() => props.modelValue, (val) => {
  visible.value = val;
  // 5. 弹窗打开时，获取板块列表
  if (val) {
    forumStore.fetchSections();
  }
});
watch(visible, (val) => { emit('update:modelValue', val); });

const resetForm = () => {
  postForm.title = '';
  postForm.content = '';
  postForm.sectionId = null; // 重置时也清空板块选择
};

const handleClose = () => {
  resetForm();
  visible.value = false;
};

// const handlePublish = () => {
//   if (!postForm.title.trim() || !postForm.content.trim()) {
//     ElMessage.warning('标题和内容不能为空！');
//     return;
//   }
//   // 增加对板块选择的校验
//   if (!postForm.sectionId) {
//     ElMessage.warning('请选择帖子板块！');
//     return;
//   }
//   isSubmitting.value = true;
//   forumStore.createPost({
//     title: postForm.title,
//     content: postForm.content,
//     sectionId: postForm.sectionId
//   }, () => {
//     isSubmitting.value = false;
//     handleClose();
//     emit('post-created'); // 通知父组件刷新列表
//   });
// };
const handlePublish = () => {
  if (!postForm.title.trim() || !postForm.content.trim()) {
    ElMessage.warning('标题和内容不能为空！');
    return;
  }
  if (!postForm.sectionId) {
    ElMessage.warning('请选择帖子板块！');
    return;
  }
  isSubmitting.value = true;
  forumStore.createPost(
    {
      title: postForm.title,
      content: postForm.content,
      sectionId: postForm.sectionId
    }, 
    // Success callback
    () => {
      isSubmitting.value = false;
      handleClose();
      emit('post-created'); // 通知父组件刷新列表
    },
    // Failure callback (新增部分)
    (errorMessage, errorCode) => {
      isSubmitting.value = false; // 无论什么错误，都结束加载状态
      if (errorCode === 431) {
        // 检测到敏感词
        ElMessage.error(`内容不合规: ${errorMessage}`);
      } else if (errorCode === 423) {
        // 审核功能暂时不可用
        ElMessage.warning(`${errorMessage}，请稍后重试。`);
      } else {
        // 其他未知错误
        ElMessage.error(`发布失败: ${errorMessage}`);
      }
    }
  );
};
</script>